<template>
  <view class='card_list'>
    <!-- 标题 -->
    <view class='card_title'>{{title}}</view>
    <!-- 内容 -->
    <view class='card_items'>
      <card_item v-for="(goods,index) in goodsList" :key="index" :item='goods' class='item'></card_item>
    </view>
    <!-- 标尾 -->
    <view class='card_footer'>
      <navigator
        url="/pages/goods/list/list"
        open-type="navigate"
        hover-class="navigator-hover"
      >
            查看更多
      </navigator>
    </view>
</view>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'

  export default defineComponent({
    name:'card_list',
  })
</script>

<script setup lang="ts">
import card_item from '../card_item/card_detail.vue';

  const props= defineProps(['goodsList','title'])
</script>

<style scoped>
  .card_list{
    width: 100%;
    background: #cccccc;
}

.card_title{
    width: 100%;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    padding-top: 10px;
}

.card_items{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card_items .item::before{
    content: '';
    width: 0;
}


/* 查看更多 */
.card_footer{
    width: 100%;
    height: 30px;
    margin-top: 5px;
    border-radius: 20px;
    line-height: 30px;
    background: #fff;
    text-align: center;
}
</style>